<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <h2>输入base64值</h2>
          <p>
            <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="textarea">
            </el-input>
          </p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <h2>展示图片</h2>
          <div class="block">
            <span class="demonstration">自定义</span>
            <el-image :src="src">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple">
            <h2>对象或文本</h2>
            <p>
              <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="option">
              </el-input>
            </p>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <h2>json</h2>
          <p>
            <el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="json">
            </el-input>
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</body>
<!-- import Vue before Element -->
<script src="./script/vue.js"></script>
<!-- import JavaScript -->
<script src="./script/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return { textarea: "", src: "", option: "", json: "" }
    },
    watch: {
      textarea (newVal, oldVal) {
        // 监听 num 属性的数据变化
        // 作用 : 只要 num 的值发生变化,这个方法就会被调用
        //只要没有发生变化，就没有办法进行其他的操作
        //newData是更新后的数据
        //oldData是旧数据
        // console.log('oldVal:', oldVal)
        // console.log('newVal:', newVal)
        this.src = ""
        if (newVal.startsWith("data:image/png;base64,")) {
          this.src = newVal
        }
      },
      option (optionString, oldVal) {
        this.json = ""
        var startIndex = optionString.indexOf('=');
        var endIndex = optionString.lastIndexOf(';');

        var optionCode = optionString.slice(startIndex + 1, endIndex).trim();

        var startIndex2 = optionCode.indexOf('{');
        var endIndex2 = optionCode.lastIndexOf('}') + 1;

        // Extract the substring between the first curly brace and the last curly brace
        var trimmedOptionCode = optionCode.slice(startIndex2, endIndex2).trim();

        // Parsing the trimmed string into a JSON object
        var optionObject = eval('(' + trimmedOptionCode + ')');

        // Now, you can work with the optionObject as a regular JavaScript object
        console.log(optionObject);

        this.json = JSON.stringify(optionObject)
      }
    }
  })
</script>

</html>